<template>
  <!-- 历史和热搜 -->
  <div>
    <div class="lishiresou">
      <div class="wenzi">
        <p>历史记录</p>
        <van-icon name="delete-o" @click="removelishiresou"/>
      </div>
      <van-tag plain type="primary" v-for="item in historyKeywordList" :key="item.id"  color='#969799' @click="HistoricalClick(item)">{{item}}</van-tag>
    </div>

    <div class="lishiresou">
      <div class="wenzi">
        <p>热门搜索</p>
      </div>
      <van-tag plain type="primary" v-for="item in hotKeywordList" :key="item.id" :color="item.is_hot==1?'red':'#969799'" @click="HistoricalremenClick(item.keyword)">{{item.keyword}}</van-tag>
    </div>
  </div>
</template>

<script>
import {SearchClearhistory} from "@/request/api"
export default {
    props:["historyKeywordList","hotKeywordList"],
  data() {
    return {};
  },
  methods:{
    // 历史的点击事件
    HistoricalClick(item){
      this.$emit("fn",item)
    },
    // 热搜的点击事件
    HistoricalremenClick(item){
      this.$emit("fn2",item)
    },
    // 删除的点击事件
    removelishiresou(){
      SearchClearhistory().then(res=>{
        
          this.$toast.success('删除成功');
      })
    }
  }
};
</script>
 
<style lang = "less" scoped>
.lishiresou {
  background-color: #fff;
  padding: 0.1rem;
  margin-bottom: 0.2rem;
.wenzi{
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  margin-bottom: .1rem;
}
.van-tag{
    margin: 0rem .1rem .1rem 0;
}
}

</style>